<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片 -->
		<el-card class="box-card">
			<el-row :gutter="20">
				<el-col :span="4">
					<!-- 添加用户按钮 -->
					<el-button type="primary" @click="IsShowAddCate=true">添加分类</el-button>
				</el-col>
			</el-row>
			<!-- 表格区域 -->
			<el-table
				:data="catedata"
				border
				stripe
				style="width: 100%"
				row-key="id"
				:tree-props="{children:'vcates'}"
			>
				<el-table-column type="index" width="40"></el-table-column>
				<el-table-column prop="id" label="ID" min-width="50"></el-table-column>
				<el-table-column prop="cateName" label="分类名称" width="200"></el-table-column>
				<el-table-column prop="isValid" label="是否有效" width="200">
					<template slot-scope="scope">
						<i class="el-icon-success" style="color :#67C23A;" v-if="scope.row.isValid"></i>
						<i class="el-icon-error" style="color :#F56C6C;" v-else></i>
					</template>
				</el-table-column>

				<el-table-column prop="grade" label="排序" width="200">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.grade==1">一级</el-tag>
						<el-tag type="success" v-else-if="scope.row.grade==2">二级</el-tag>
						<el-tag type="warning" v-else>三级</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="200">
					<template slot-scope="scope">
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">编辑</el-button>
						<!-- 删除按钮 -->
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.page"
				:page-sizes="[1, 2, 5, 10]"
				:page-size="queryInfo.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>

		<!-- 添加分类的对话框 -->
		<addCate :dialogVisible="IsShowAddCate" @IsShowDialdg="IsShowAdd" @dateupdata="getcatedata"></addCate>
		<!-- 修改 -->
		<editCate
			:dialogVisible="IsShowEditCate"
			:cateid="cateid"
			@IsShowDialdg="IsShowEdit"
			@dateupdata="getcatedata"
		></editCate>
	</div>
</template>

<script>
import addCate from './AddCate'
import editCate from './EditCate'
export default {
	created() {
		this.getcatedata()
	},
	components: {
		addCate,
		editCate
	},
	data() {
		return {
			catedata: [],
			queryInfo: {
				page: 1,
				limit: 10
			},
			total: 0,
			cateid: 0,
			IsShowAddCate: false,
			IsShowEditCate: false
		}
	},
	methods: {
		getcatedata() {
			this.$get('/api/Cate/GetCateList', this.queryInfo).then(res => {
				if (res.code == 0) {
					this.catedata = res.data
					this.total = res.count
				}
			})
		},
		//监听pagesize改变的事件
		handleSizeChange(newsize) {
			this.queryInfo.limit = newsize
			this.getcatedata()
		},
		//监听页码值改变的事件
		handleCurrentChange(newpage) {
			this.queryInfo.page = newpage
			this.getcatedata()
		},
		IsShowAdd(data) {
			this.IsShowAddCate = data.IsShow
		},
		IsShowEdit(data) {
			this.IsShowEditCate = data.IsShow
		},
		//修改
		edit(id) {
			this.IsShowEditCate = true
			this.cateid = id
		},
		//删除
		del(id) {
			this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$get('/api/Cate/DelCate', {
						Id: id
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: res.msg
							})
							this.getcatedata()
						}else{
							this.$message.error(res.msg)
							
						}
					}).catch(err=>{
						console.log(err)
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		}
	}
}
</script>